<template>
    <div class="group-management">
        <div class="search-content">
            <el-form :model="searchContent" ref="searchFrom" :inline="true">
            	<el-form-item label="" prop="groupId">
            		<el-input class="search-content-input" v-model="searchContent.groupId" placeholder="请输入活动ID"></el-input>
				</el-form-item>
            	<el-form-item label="" prop="groupName">
            		<el-input class="search-content-input" v-model="searchContent.groupName" placeholder="请输入团购名称"></el-input>
				</el-form-item>
            	<el-form-item label="" prop="groupName">
            		<el-input class="search-content-input" v-model="searchContent.storeName" placeholder="请输入店铺名称"></el-input>
				</el-form-item>
            	<el-form-item label="添加日期：" prop="addTime">
					<el-date-picker
            	        v-model="searchContent.addTime"
            	        type="daterange"
            	        range-separator="至"
            	        start-placeholder="开始日期"
            	        end-placeholder="结束日期">
            	    </el-date-picker>
				</el-form-item>
            	<el-form-item label="活动日期：" prop="groupTime">
            	    <el-date-picker
            	        v-model="searchContent.groupTime"
            	        type="daterange"
            	        range-separator="至"
            	        start-placeholder="开始日期"
            	        end-placeholder="结束日期">
            	    </el-date-picker>
				</el-form-item>
            	<el-form-item label="" prop="status">
            		<el-select v-model="searchContent.status" placeholder="请选择状态">
            		    <el-option
            		            v-for="item in options"
            		            :key="item.value"
            		            :label="item.label"
            		            :value="item.value">
            		    </el-option>
            		</el-select>
				</el-form-item>
            	<el-form-item label="归属集团：" prop="first_depart_id">
            	    <el-select 
            	        v-model="searchContent.first_depart_id" 
            	        placeholder="请选择集团">
            	        <el-option
            	            v-for="item in groupList"
            	            :key="item.value"
            	            :label="item.label"
            	            :value="item.value">
            	        </el-option>
            	    </el-select>
            	</el-form-item>
            	<el-form-item>
            		<el-button type="primary" @click="search">搜索</el-button>
            		<el-button type="primary" @click="resetSearchData">重置</el-button>
            	</el-form-item>
			</el-form>
        </div>
        <div class="search-list">
            <el-table :data="dataList" border :height="oHeight">
                <el-table-column
                    align="center"
                    prop="groupId"
                    label="ID"
                    min-width="60">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="groupName"
                    label="团购名称"
                    min-width="120">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="storeName"
                    label="店铺名称"
                    min-width="120">
				</el-table-column>
                <el-table-column
                    align="center"
                    prop="depart_name"
                    label="所属集团"
                    min-width="110">
				</el-table-column>
                <el-table-column
                    align="center"
                    label="活动时间"
                    min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                        <br>
                        至
                        <br>
                        <span>{{scope.row.endTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="添加时间"
                    min-width="120">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime | dateFormatter('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="status"
                    label="审核状态"
                    min-width="90">
                    <template slot-scope="scope">
                        {{computedCheckStatus(scope.row.status)}}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="活动链接"
                    min-width="90">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="copyLink(scope.row.link)">复制</el-button>
                    </template>
                </el-table-column>
					<el-table-column
						align="center"
						label="是否代运营"
						min-width="90">
						<template slot-scope="scope">
							<el-checkbox
							v-model="scope.row.ncgb_another_operation"
							true-label="1"
							false-label="0"
							 class="checkchoose"
							@change="issetOperation(scope.row)"
						></el-checkbox>
						</template>
					</el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    min-width="180">
                    <template slot-scope="scope">
                        <el-button :type="scope.row.status == 0 || scope.row.status == 4 ? 'info' : 'primary'" @click="goCheckGroup(scope.row)">审核</el-button>
                        <el-button type="warning" @click="showGroupDialog(scope.row)">关闭</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <a class="btn-bottom" :href="exportLink">导出</a>
                </div>
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="searchContent.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchContent.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirmClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import { resize } from "@/common/js/height.js";
    import {dateFormatter} from "../../../../common/js/util";
	import Qs from 'qs'

	export default {
		data() {
			return {
				options: [
					{label: '通过', value: 2},
					{label: '未通过', value: 3},
					{label: '审核中', value: 1},
					{label: '开启', value: 4},
					{label: '关闭', value: 0}
				],
				oHeight: 800,
				searchContent: {
					groupId: '',
					groupName: '',
					storeName: '',
					addTime: '',
					groupTime: '',
					status: '',
					first_depart_id: '',
					currentPage: 1,
					pageSize: +localStorage.getItem('pageSize') || 10
				},
				needCloseGoods: null,
				dialogVisible: false,
				dialogMsg: '',
				dataList: [],
				groupList: [],
				total: 0
			}
		},
		computed: {
			exportLink() {
				const data = {};
				data.export = 'yes';
				data.id = this.searchContent.groupId;
				data.title_name = this.searchContent.groupName;
				data.store_name = this.searchContent.storeName;
				data.first_depart_id = this.searchContent.first_depart_id;
				let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
				}
				return location.protocol + '//' + domain.replace('admin', 'api') + '/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=list&' + Qs.stringify(data);
			}
		},
		methods: {
        	handleGroup() {
        	    this.$http.post('/crm/coupons/index.php?act=statistics&op=getCouponDepart')
        	    .then(res => {
        	        if (res.data) {
        	            this.groupList = [
        	                { label: '全部', value: 0 },
        	                ...res.data.map(item => ({ 
        	                    label: item.depart_name, 
        	                    value: parseInt(item.depart_id) 
        	                }))
        	            ]
        	        }
        	    }).catch(error => {
        	        error && this.$message.error(`${error}`)
        	    })
        	},
			
			issetOperation(group){
             	this.$http.get('/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=setOperation', {params:  {
					id: group.groupId,//0否 1是
					state:group.ncgb_another_operation
				}}).then(res => {
					if(res.code==1){
						this.$message({message: res.msg,type: 'success'});
					}else{
						group.ncgb_another_operation=group.ncgb_another_operation=='0'?'1':'0'
						this.$message({message: res.msg,type: 'warning'});
					}
				})
			},
			copyLink(url) {
				var cText = url ? url : document.location.href;
				var aux = document.createElement("input");
				aux.setAttribute("value", cText);
				document.body.appendChild(aux);
				aux.select();
				document.execCommand("copy");
				document.body.removeChild(aux);
				alert("链接复制成功!");
			},
			closeGroup(group) {
				this.$http.post('/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=close', {
					id: group.groupId
				}).then(res => {
					if (res.code == 1) {
						group.status = 0;
						this.handleClose();
					} else {
						alert(res.msg)
					}
				})
			},
			showGroupDialog(groupItem) {
				this.needCloseGroup = groupItem
				this.dialogMsg = '确定要关闭此活动？';
				this.dialogVisible = true;
			},
			handleClose() {
				this.dialogVisible = false;
				this.dialogMsg = '';
				this.needCloseGroup = null;
			},
			confirmClose() {
				this.closeGroup(this.needCloseGroup);
			},
			computedCheckStatus(code) {
				switch (code) {
					case 0:
						return '关闭';
					case 1:
						return '审核中';
					case 2:
						return '通过';
					case 3:
						return '未通过';
					case 4:
						return '开启';
				}
			},
			resetSearchData() {
				this.searchContent.groupId = '';
				this.searchContent.groupName = '';
				this.searchContent.storeName = '';
				this.searchContent.addTime = '';
				this.searchContent.groupTime = '';
				this.searchContent.status = '';
				this.searchContent.first_depart_id = '';
				this.getListData();
			},
			search() {
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				localStorage.setItem('pageSize', pageSize);
				this.searchContent.currentPage = 1;
				this.getListData();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getListData();
			},
			getListData() {
				const data = {};
				data.page = this.searchContent.currentPage;
				data.eachNum = this.searchContent.pageSize;
				data.id = this.searchContent.groupId;
				data.title_name = this.searchContent.groupName;
				data.store_name = this.searchContent.storeName;
				data.first_depart_id = this.searchContent.first_depart_id;
				if (this.searchContent.addTime) {
					const startAddMS = this.searchContent.addTime[0].getTime();
					const endAddMS = this.searchContent.addTime[1].getTime();
					if (startAddMS == endAddMS) {
						data.start_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', startAddMS);
						data.end_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    } else {
						data.start_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', this.searchContent.addTime[0]);
						data.end_addtime = dateFormatter('YYYY-MM-DD HH:mm:ss', endAddMS + (24 * 60 * 60 - 1) * 1000);
                    }
				}
				if (this.searchContent.groupTime) {
					const startMS = this.searchContent.groupTime[0].getTime();
					const endMS = this.searchContent.groupTime[1].getTime();
					if (startMS == endMS) {
						data.start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', startMS);
						data.end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
					} else {
						data.start_time = dateFormatter('YYYY-MM-DD HH:mm:ss', startMS);
						data.end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', endMS + (24 * 60 * 60 - 1) * 1000);
					}
				}
				data.status = this.searchContent.status;

				this.$http.post('/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=list', data).then(res => {
					if (res.code == 1) {
						if (res.data && res.data.list.length) {
							this.dataList = res.data.list.map(function(item) {
								return {
									groupId: item.asgb_id,
									groupName: item.asgb_title_name,
									headerImage: item.header_image,
									storeName: item.asgb_store_name,
									startTime: item.asgb_start_time * 1000,
									endTime: item.asgb_end_time * 1000,
									status: item.asgb_status * 1,
									addTime: item.asgb_addtime * 1000,
									depart_name: item.depart_name,
									ncgb_another_operation: item.asgb_another_operation,
									// link: window.location.protocol + '//' + window.document.domain.replace('admin', 'web') + '/member/afterSellGroup/groupDetail.html?id=' + item.asgb_id
									// link: (item.belong_project == 1 ? '' : '/dealerpage') + '/pages/aftersale/aftersaledetail/aftersaledetail?group_id=' + item.asgb_id
									link: 'pages/aftersale/aftersaledetail/aftersaledetail?store_id='+ item.asgb_store_id +'&group_id=' + item.asgb_id
								}
							});
							this.total = parseInt(res.data.totalNum);
						} else {
							this.dataList = [];
							this.total = 0;
						}
					}
					else if (res.code == 2001) {
						this.dataList = [];
						this.total = 0;
					}
					else {
						alert(res.msg);
					}
				})
			},
			goCheckGroup(group) {
				if (group.status == 0 || group.status == 4) {
					return;
                }
				this.$router.push(`/home/operate-panel/afterSell-group/group-detail?id=${group.groupId}`)
			}
		},
		mounted() {
			resize(this)
		},
		created() {
			if (this.$parent.tabLists[1] && this.$parent.tabLists[1].label == "审核" && this.$parent.tabLists[1].name == "group-detail") {
				this.$parent.tabLists.splice(1, 1);
            }
			this.getListData();
			this.handleGroup()
		},
		name: "group-management"
	}
</script>

<style lang="scss" scoped>
    .group-management {
        .search-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-input {
                width: 200px;
            }
            .time-range-wrapper {
                .time-range-label {
                    font-size: 14px;
                }
                display: flex;
                align-items: center;
                /deep/.el-range-separator {
                    box-sizing: content-box;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .btn-bottom {
        background: #409EFF;
        color: #fff;
        border: 0;
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 3px;
        display: inline-block;
    }
</style>